<template>
  <div class="home">
    <div class="nav">
      <el-image style="width: 38px;height: 37px;" :src="require('@/assets/images/canteenIcon.png')" />
      <div class="title">饭堂管理/订餐管理</div>
    </div>
    <div class="contentBox">
      <!-- 搜索、选择 -->
      <div class="sousuo">
        <!-- ref="form" :model="form" -->
        <el-form ref="form" v-model="form" style="display: flex;flex-wrap: wrap;" label-width="80px">
          <el-form-item label="学校名称">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学生姓名">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="缴费方式">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div style="display: flex;">
              <div class="btn1"><el-button type="primary">查询</el-button></div>
              <div class="btn2"><el-button type="primary">重置</el-button></div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <!-- 订餐情况 -->
      <div class="crderingmeals">
        <div class="mealsNumber">
          <div>订餐人数: <span>12121</span> 人</div>
          <div>早餐: <span>12121</span> 人</div>
          <div>午餐: <span>12121</span> 人</div>
        </div>
        <div class="btnbox">
          <div class="btn">
            <el-image style="width: 26px;height: 26px; margin-right: 10px;"
              :src="require('@/assets/images/addIcon.png')"></el-image>
            <el-button type="warning" round>添加</el-button>
          </div>
          <div class="btn">
            <el-image style="width: 27px;height: 23px;margin-right: 10px;"
              :src="require('@/assets/images/daoruIcon.png')"></el-image>
            <el-button type="warning" round>导出</el-button>
          </div>
          <div class="btn">
            <el-image style="width: 27px;height: 24px;margin-right: 10px;"
              :src="require('@/assets/images/xiazaiIcon.png')"></el-image>
            <el-button type="warning" round>导入</el-button>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="tableBox">
        <el-table border :data="leavesList" :max-height="750" stripe>
          <el-table-column :resizable="false" type="index" align="center" label="序号" />
          <el-table-column :resizable="false" label="学校名称" align="center" prop="reason" />
          <el-table-column :resizable="false" label="年级" align="center" prop="reason" />
          <el-table-column :resizable="false" label="班级" align="center" prop="reason" />
          <el-table-column :resizable="false" label="学生姓名" align="center" prop="reason" />
          <el-table-column :resizable="false" label="家长手机号" align="center" prop="reason" />
          <el-table-column :resizable="false" label="订餐情况" align="center" prop="reason" />
          <el-table-column :resizable="false" label="缴费方式" align="center" prop="reason" />
          <el-table-column :resizable="false" label="缴费时间" align="center" prop="reason" />
          <el-table-column :resizable="false" label="操作" align="center">
            <template slot-scope="scope">
              <el-button class="btn" @click="drawer = true" type="text">详情</el-button>
              <el-button style="color: #000;" type="text">编辑</el-button>
              <el-button type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- drawer -->
    <el-drawer title="详情" :visible.sync="drawer" direction="rtl" :before-close="handleClose" size="732px">
      <div class="drawercontent">
        <div class="line"></div>
        <div class="item" v-for="(item, index) in drawerData" :key="index">
          <span class="title">{{ item.title }} <div class="line"></div></span>
          <div style="margin-top: 10px;">
            <el-descriptions v-for="(item1, index1) in item.list" :key="index1" :border="true" :column="1"
              :labelStyle="{width:'130px',textAlign: 'center',color:'#000'}" :contentStyle="{color:'#000'}">
              <el-descriptions-item :label="item1.lable">{{ item1.name }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data () {
    return {
      drawer: false,
      form: {
        region: '',
      },
      leavesList: [
        { "reason": '441702200302025730' },
        { "reason": 132 },
        { "reason": 132 },
        { "reason": 132 },
      ],
      //详情
      drawerData: [
        { title: '学生信息', list: [{ lable: "学生姓名", name: "张三" }, { lable: "学生名称", name: "东莞市一小学" }, { lable: "年级", name: "一年级" }, { lable: "班级", name: "5班" }, { lable: "家长手机号", name: "12345678912" }] },
        { title: '早餐订餐详情', list: [{ lable: "订餐日期", name: "6531653165314465313至132165146516516516" }, { lable: "订餐数", name: "30餐" }, { lable: "合计金额", name: "300元" }] },
        { title: '午餐订餐详情', list: [{ lable: "订餐日期", name: "6531653165314465313至132165146516516516" }, { lable: "订餐数", name: "30餐" }, { lable: "合计金额", name: "600元" }] },
        { title: '缴费详情', list: [{ lable: "订餐总数", name: "60餐" }, { lable: "合计缴费", name: "900元" }, { lable: "缴费方式", name: "线上缴费" },{ lable: "缴费时间", name: "656464684132165846514584" }] }
      ]
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  padding: 10px;
  box-sizing: border-box;
  background-color: #eee;
  overflow: auto;
}

.nav {
  width: 1636px;
  display: flex;
  align-items: center;
  margin: 10px auto;
  padding-left: 20px;
  box-sizing: border-box;

  .title {
    margin-left: 10px;
    font-weight: bold;
  }
}

.contentBox {
  width: 1636px;
  height: 881px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  background-image: url('../../../assets/images/canteenBJ.png');
  background-size: 1636px 881px;
  background-repeat: no-repeat;

  .sousuo {
    ::v-deep .el-input--medium .el-input__inner {
      width: 170px;
    }

    .btn1 {
      ::v-deep .el-button--medium {
        background-image: linear-gradient(to right, #DE0D0F, #F27605);
      }
    }

    .btn2 {
      ::v-deep .el-button--medium {
        background-color: #F5F5F5;
        color: #999999;
        border: 1px solid #999999;
        margin-left: 10px;
      }
    }

  }

  .crderingmeals {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .mealsNumber {
      width: 30%;
      display: flex;
      justify-content: space-between;
    }

    .btnbox {
      width: 20%;
      display: flex;
      justify-content: space-between;

      .btn {
        display: flex;
        align-items: center;

        ::v-deep .el-button--medium {
          background-color: #F47D04;
          padding: 5px 10px;
        }
      }
    }
  }

  .tableBox {
    margin-top: 10px;

    .btn {
      color: #fff;
      background-color: #F47D04;
      padding: 5px 10px;
      border-radius: 20px;
    }
  }
}

// drawer
.drawercontent {
  padding: 0 20px 20px;
  box-sizing: border-box;

  .line {
    border: 1px solid #ECECEC;
    width: 100%;
  }

  .item {
    margin-top: 10px;

    .title {
      font-size: 16px;
      font-weight: bold;
      position: relative;
      z-index: 0;

      .line {
        position: absolute;
        top: 12px;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 8px;
        border-radius: 5px;
        background-color: #FFCE80;
      }
    }
  }
}
</style>